<template>
	<view class="main">
		<view class="main_body">
			<view class="content">
				<view class="head">
					<text class="title">请输入已绑定的手机号</text>
					<text class="subtitle">我们会保护您的账号信息，请放心填写</text>
				</view>
				<view class="item_body" >
					  <!-- 手机号输入框 -->
					<view class="baikuang">
						<text class="prefix">+86</text>
						<image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea64e4.png" style="width: 9px;height: 6px; margin-top: 5px;" />
						<input class="item_input" placeholder-style="color:#FFF" type="text" v-model="phone" placeholder="请输入手机号" >
					</view>
					<!-- 下一步按钮 -->
					<button :class=" 'loginbut ' +( phone ? 'OK' : 'disabled' )" @click="nextStep" :disabled=" !phone" >下一步</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/utils/utils.js";
	
	export default {
		
		data() {
			return {
					phone: '', // 手机号
			};
		},
		methods: {
			// 手机号输入事件
			  onPhoneInput(e) {
				this.phone = e.detail.value;
				},
			nextStep() {
				 const { phone } = this;
				 // 校验手机号
				    if (!phone) {
				      uni.showToast({
				        title: '请输入手机号',
				        icon: 'none',
				      });
				      return;
				    }
				  // 校验手机号格式
				      if (!/^1[3456789]\d{9}$/.test(phone)) {
				        uni.showToast({
				          title: '手机号格式错误',
				          icon: 'none',
				        });
				        return;
				      }
					uni.navigateTo({
							url: `/pages/login/verify?phone=${phone}`,
					});
				},
			},		
		};
</script>


<style>
	.head {
		width: 100%;
		/* padding-top: 124rpx; */
	}

	.title {
		width: 150px;
		height: 28px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 20px;
		line-height: 28px;
		letter-spacing: 0px;
		color: #000;
		display: block;
		margin-bottom: 5px;
	}

	.subtitle {
		width: 182px;
		height: 18px;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 13px;
		line-height: 18.2px;
		letter-spacing: 0%;
		color: #333;
	}

	.item_body {
		padding-top: 50rpx ;
		display: flex;
		flex-wrap: wrap;
		border-radius: 30rpx;
	}

	.item_body .baikuang {
		width: 100%;
		position: relative;
		margin-bottom: 40rpx;
		font-weight: 400;
		font-size: 15px;
		line-height: 21px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #EBEBEB;
		padding-bottom: 10px;

	}
	
	.prefix {
	  font-size: 16px;
	  color: #333;
	  margin-right: 10rpx;
	}

	.item_body .baikuang .item_input {
		height: 76rpx;
		line-height: 76rpx;
		padding-left: 25rpx;
		background-color: transparent; /* 确保背景透明 */
		border: none; /* 移除边框 */
		  outline: none; /* 移除聚焦时的外边框 */
		color: #333;
		flex: 1;
		 min-width: 200px; /* 设置最小宽度 */
		z-index: 1; /* 确保输入框在最上层 */
	}
	
	.link {
	  color: #0822cc;
	}

	.loginbut {
		width: 100%;
				height: 80rpx;
				line-height: 80rpx;
		    background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
		  	border-radius: 32px;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				pointer-events: auto; /* 确保用户交互正常 */
	}

	.loginbut[disabled] {
	  background-color: #ccc;
	}

</style>
    